import React, { useRef, useState } from 'react';
import {
  SafeAreaView,
  Button,
  View,
  Text,
  UIManager,
  findNodeHandle,
  StyleSheet,
  DeviceEventEmitter,
  ScrollView,
} from 'react-native';
import {RTNCenteredTextView, RTNMethod} from 'rtn-centered-text';

/**
 * CustomTest 组件 - 一个自定义UI组件演示
 *
 * 该组件展示了如何与原生模块进行交互，包括：
 * - 通过RTNCenteredTextView显示文本内容
 * - 监听原生侧事件(onStatusChange)
 * - 调用原生方法(getDisplayInfo)
 * - 通过UIManager向原生侧发送命令(setFontSize)
 *
 * 组件包含以下功能：
 * - 文本触摸事件处理(onTextTouch)
 * - 按钮控制文本内容
 * - 显示原生模块返回的结果数据
 * - 显示原生侧状态变化
 */
const CustomTest = () => {
  const [content, setContent] = useState('这是一个自定义UI组件');
  const [result, setResult] = useState<any>(null);
  const [status, setStatus] = useState<string>('');
  const nativeRef = useRef(null);

  // 监听原生侧事件
  DeviceEventEmitter.addListener('onStatusChange', e => {
    setStatus(e);
  });

  return (
    <SafeAreaView style={styles.safeArea}>
      <RTNCenteredTextView
        ref={nativeRef}
        text={content}
        style={styles.textView}
        onTextTouch={e => {
          if (e.type == '0') setContent('Touch Down');
          else if (e.type == '1') setContent('Touch Up');
          else if (e.type == '2') setContent('Touch Move');
        }}
      />
      <View style={styles.buttonContainer}>
        <Button
          title="设置内容为：这是一个自定义UI组件"
          onPress={() => setContent('这是一个自定义UI组件')}
          color="#007bff"
        />
        <Button
          title="设置内容为：这是一个自定义UI组件2"
          onPress={() => setContent('这是一个自定义UI组件2')}
          color="#007bff"
        />
        <Button
          title="getDisplayInfo"
          onPress={() => setResult(RTNMethod?.getDisplayInfo())}
          color="#007bff"
        />
        <Button
          title="给原生侧发送消息设置字体大小：30"
          onPress={() =>
            UIManager.dispatchViewManagerCommand(
              findNodeHandle(nativeRef.current),
              'setFontSize',
              [30],
            )
          }
          color="#007bff"
        />
        <Button
          title="给原生侧发送消息设置字体大小：15"
          onPress={() =>
            UIManager.dispatchViewManagerCommand(
              findNodeHandle(nativeRef.current),
              'setFontSize',
              [15],
            )
          }
          color="#007bff"
        />
      </View>
      <ScrollView style={styles.scrollView}>
        <Text style={styles.statusText}>Status: {status}</Text>
        {result ? (
          <>
            {Object.entries(result).map(([key, value]) => (
              <View style={styles.resultItem} key={key}>
                <Text style={styles.resultKey}>{key}:</Text>
                <Text style={styles.resultValue}>{JSON.stringify(value)}</Text>
              </View>
            ))}
          </>
        ) : null}
      </ScrollView>
    </SafeAreaView>
  );
};

export default CustomTest;

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    padding: 16,
  },
  textView: {
    width: '100%',
    height: 50,
    backgroundColor: '#f0f0f0',
    textAlign: 'center',
    fontSize: 18,
    marginTop: 16,
  },
  buttonContainer: {
    flexDirection: 'column',
    gap: 8,
    marginVertical: 16,
    padding: 8,
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 16,
  },
  statusText: {
    fontSize: 16,
    marginBottom: 8,
  },
  resultItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 4,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  resultKey: {
    fontSize: 14,
    color: '#333',
  },
  resultValue: {
    fontSize: 14,
    color: '#666',
  },
});